<template>
  <div>
    <todo-button v-model:active="activeBtn"></todo-button>
    <hr>
    <todo-input @toAddTask="getTask"></todo-input>
    <!-- bootstrap 简化的样式 mt-2 margin-top:2px -->
    <todo-list :list="list" class="mt-2"></todo-list>
  </div>
</template>

<script>
import TodoList from './components/toao-list/TodoList.vue';
import TodoInput from './components/todo-input/TodoInput.vue';
import TodoButton from './components/todo-button/TodoButton.vue';
export default {
  name: 'MyApp',
  data() {
    return {
      // 任务列表数据
      todolist: [
        { id: 1, task: '周一早上9:00开会', done: false },
        { id: 2, task: '周二早上8:00开会', done: false },
        { id: 3, task: '周三晚上9:00聚餐', done: false }
      ],
      // 下一个可用的id
      nextId: 4,
      // 默认激活的按钮索引
      activeBtn: 0
    };
  },
  components: {
    TodoList,
    TodoInput,
    TodoButton
  },
  methods: {
    getTask(taskname) {
      this.todolist.push({
        id: this.nextId,
        task: taskname,
        done: false
      });
      this.nextId += 1;
    }
  },
  computed: {
    list() {
      if (this.activeBtn == 0) return this.todolist;
      if (this.activeBtn == 1) return this.todolist.filter(x => x.done);
      if (this.activeBtn == 2) return this.todolist.filter(x => !x.done);
    }
  }
};
</script>

<style scoped>
</style>